import React from 'react';
import { connect } from 'react-redux';
import {loadFinshAction,initTaskList} from '../action/action';
import {request} from '../request';


const mapStateToProps = state => {
    debugger;
    return {
        tasks:state.tasksReducer.tasks,
        isLoad:state.tasksReducer.isLoad
    }
}



const mapDispatchToProps = dispatch => {
    return {
        getTaskList: () => {
             dispatch((dispatch,getState)=>{
                request.getTask().then(result=>{
                    setTimeout(function(){
                        dispatch(initTaskList(result.data));
                        dispatch(loadFinshAction);
                    },1000)
                    
                 })

             })
        },
        updateTask:(tasks)=>{
            console.log("updateTask",tasks);
            dispatch(initTaskList(tasks));
        }
    }
}


class UncompleteTask extends React.Component {
    
    getList(){
        if(!this.props.isLoad){
            this.props.getTaskList();
        }
        
    }
    
    finshTask(id){
        const tasks = [...this.props.tasks];
        tasks.map(function(taskItem){
            if(taskItem.id == id){
                taskItem.status = "1"//完成
            }
        });
        this.props.updateTask(tasks);
    
    }
    addTask(){
        const tasks = [...this.props.tasks];
        var value =  this.refs.taksInput.value;
        const task ={};
        task.text =value;
        task.status = "0";
        task.id = this.UUid();
        tasks.push(task);
        this.props.updateTask(tasks);
    }
    deleteTask(id){
        const tasks = [...this.props.tasks];
        tasks.map(function(taskItem,index){
            if(taskItem.id == id){
                tasks.splice(index, 1)
            }
        });
        this.props.updateTask(tasks);
    }

    UUid(){
        var s = [];
        var hexDigits = "0123456789abcdef";
        for (var i = 0; i < 32; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
        }
        s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
        s[8] = s[13] = s[18] = s[23];
        var uuid = s.join("");
        return uuid;
    }

    createTaskList(tasks){
        var _this = this;
        var tasks = tasks.filter(item=>item.status =="0");
        return tasks.map(function(task){
             return <div> 
                 <input type="checkbox" key ={"key_" + task.id} id={"input_" + task.id} onClick={_this.finshTask.bind(_this,task.id)}/> 
                 {task.text}
                 <button onClick={_this.deleteTask.bind(_this,task.id)}>删除</button>
                 </div>
        })
    }

    componentDidMount(){
        this.getList();
    }
    

    render() {
        console.log("render",this.props);
        return (
            <div>
                <input ref={"taksInput"}></input><button onClick={this.addTask.bind(this)}>添加</button>
                <br></br>未完成任务内容
                {this.props.isLoad==false?"加载中":""}
                {this.createTaskList(this.props.tasks)}
            </div>
        )
    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(UncompleteTask)




